import React, { Component } from 'react'
import { Button, Table } from 'antd'
import AddOrEdit  from "./components/addOrEdit";
import { getDeptTree } from '@/services/api'

export default class Page02 extends Component {
  state = {
    dataSource: [],
    isAdd: true,
    visible: false,
    item: {}
  }
  columns = [
    {
      title: '名称',
      dataIndex: 'name'
    },
    {
      title: '上级部门',
      dataIndex: 'parentName'
    },
    {
      title: '排序',
      dataIndex: 'sort'
    },
    {
      title: '操作',
      render: (text, record, index) => {
        return (
          <div>
            <Button type="link" onClick={() => {this.openModal(1, record)}}>修改</Button>
            <Button type="link">删除</Button>
          </div>
        )
      }
    }
  ]
  componentDidMount() {
    this.getDeptTree()
  }
  getDeptTree = async () => {
    let res = await getDeptTree()
    this.setState({
      dataSource: res.data
    })
  }
  openModal = (type, item) => {
    this.setState({
      isAdd: type ? false : true,
      visible: true,
      item,
    })
  }
  render() {
    const { dataSource, isAdd, visible, item }  = this.state
    return (
      <div>
        <Button type="primary" onClick={() => {this.openModal(0)}}>新增</Button>
        <Table
          className="tree-wrap"
          columns={this.columns}
          dataSource={dataSource}
          rowKey="id"
          pagination={{hideOnSinglePage: true}}
        ></Table>
        {visible ? <AddOrEdit visible={visible} isAdd={isAdd} closeModal={() => {this.setState({visible: false})}} treeData={dataSource} item={item}></AddOrEdit> : null}
        
      </div>
    )
  }
}
